<template>
  <div class="dashboard-container">
    <!-- 头部标题 -->
    <div class="dashboard-header">
      <div class="header-title">
        <span class="title-main">AI智能作业批改系统</span>
        <span class="title-sub">数据监控大屏</span>
      </div>
      <div class="header-time">{{ currentTime }}</div>
    </div>

    <!-- 主要内容区域 -->
    <div class="dashboard-content">
      <!-- 第一行：关键指标 -->
      <div class="metrics-row">
        <div class="metric-card" v-for="(metric, index) in keyMetrics" :key="index">
          <div class="metric-icon">
            <component :is="metric.icon" />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ metric.value }}</div>
            <div class="metric-label">{{ metric.label }}</div>
            <div class="metric-trend" :class="metric.trend">
              <span>{{ metric.change }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 第二行：图表区域 -->
      <div class="charts-row">
        <!-- 左侧：学习活跃度趋势 -->
        <div class="chart-panel">
          <div class="panel-header">
            <h3>学习活跃度趋势</h3>
            <div class="panel-legend">
              <span class="legend-item">
                <i class="legend-dot blue"></i>作业提交量
              </span>
              <span class="legend-item">
                <i class="legend-dot green"></i>批改完成量
              </span>
            </div>
          </div>
          <div class="chart-container">
            <v-chart :option="activityTrendOption" autoresize />
          </div>
        </div>

        <!-- 中间：成绩分布 -->
        <div class="chart-panel">
          <div class="panel-header">
            <h3>成绩分布统计</h3>
          </div>
          <div class="chart-container">
            <v-chart :option="scoreDistributionOption" autoresize />
          </div>
        </div>

        <!-- 右侧：学科覆盖率 -->
        <div class="chart-panel">
          <div class="panel-header">
            <h3>学科覆盖率</h3>
          </div>
          <div class="chart-container">
            <v-chart :option="subjectCoverageOption" autoresize />
          </div>
        </div>
      </div>

      <!-- 第三行：详细图表 -->
      <div class="charts-row">
        <!-- 左侧：AI批改效率 -->
        <div class="chart-panel wide">
          <div class="panel-header">
            <h3>AI批改效率分析</h3>
            <div class="panel-controls">
              <a-radio-group v-model:value="efficiencyPeriod" size="small">
                <a-radio-button value="day">日</a-radio-button>
                <a-radio-button value="week">周</a-radio-button>
                <a-radio-button value="month">月</a-radio-button>
              </a-radio-group>
            </div>
          </div>
          <div class="chart-container">
            <v-chart :option="efficiencyOption" autoresize />
          </div>
        </div>

        <!-- 右侧：实时数据流 -->
        <div class="chart-panel">
          <div class="panel-header">
            <h3>实时数据流</h3>
          </div>
          <div class="real-time-data">
            <div class="data-stream">
              <div class="stream-item" v-for="(item, index) in realTimeData" :key="index">
                <div class="stream-time">{{ item.time }}</div>
                <div class="stream-content">{{ item.content }}</div>
                <div class="stream-status" :class="item.status">{{ item.statusText }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 第四行：地理分布和雷达图 -->
      <div class="charts-row">
        <!-- 左侧：地理分布 -->
        <div class="chart-panel">
          <div class="panel-header">
            <h3>用户地理分布</h3>
          </div>
          <div class="chart-container">
            <v-chart :option="geoDistributionOption" autoresize />
          </div>
        </div>

        <!-- 右侧：系统性能雷达图 -->
        <div class="chart-panel">
          <div class="panel-header">
            <h3>系统性能指标</h3>
          </div>
          <div class="chart-container">
            <v-chart :option="performanceRadarOption" autoresize />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart, PieChart, RadarChart, ScatterChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  MarkPointComponent,
  MarkLineComponent,
  RadarComponent,
  GeoComponent,
  VisualMapComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import { 
  BookOutlined, 
  UserOutlined, 
  CheckCircleOutlined, 
  ClockCircleOutlined 
} from '@ant-design/icons-vue'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  LineChart,
  BarChart,
  PieChart,
  RadarChart,
  ScatterChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  MarkPointComponent,
  MarkLineComponent,
  RadarComponent,
  GeoComponent,
  VisualMapComponent
])

// 当前时间
const currentTime = ref('')
const efficiencyPeriod = ref('day')

// 关键指标数据
const keyMetrics = reactive([
  {
    icon: BookOutlined,
    value: '1,247',
    label: '总作业数',
    change: '+12.5%',
    trend: 'up'
  },
  {
    icon: UserOutlined,
    value: '8,956',
    label: '活跃用户',
    change: '+8.3%',
    trend: 'up'
  },
  {
    icon: CheckCircleOutlined,
    value: '95.8%',
    label: '批改准确率',
    change: '+2.1%',
    trend: 'up'
  },
  {
    icon: ClockCircleOutlined,
    value: '2.3s',
    label: '平均响应时间',
    change: '-0.5s',
    trend: 'down'
  }
])

// 实时数据流
const realTimeData = ref([
  { time: '14:35:22', content: '用户张三提交了数学作业', status: 'success', statusText: '成功' },
  { time: '14:35:18', content: 'AI完成了英语作业批改', status: 'info', statusText: '完成' },
  { time: '14:35:15', content: '用户李四开始作业答题', status: 'processing', statusText: '进行中' },
  { time: '14:35:10', content: '系统自动备份数据', status: 'success', statusText: '成功' },
  { time: '14:35:05', content: '新用户王五注册成功', status: 'info', statusText: '新增' }
])

// 学习活跃度趋势图配置
const activityTrendOption = reactive({
  backgroundColor: 'transparent',
  grid: {
    left: '3%',
    right: '4%',
    bottom: '10%',
    top: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
    axisLine: { lineStyle: { color: '#64748b' } },
    axisLabel: { color: '#94a3b8' }
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: '#64748b' } },
    axisLabel: { color: '#94a3b8' },
    splitLine: { lineStyle: { color: '#334155', type: 'dashed' } }
  },
  series: [
    {
      name: '作业提交量',
      type: 'line',
      data: [35, 25, 45, 85, 120, 95, 60],
      smooth: true,
      lineStyle: { color: '#3b82f6', width: 3 },
      areaStyle: { 
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(59, 130, 246, 0.3)' },
            { offset: 1, color: 'rgba(59, 130, 246, 0.05)' }
          ]
        }
      }
    },
    {
      name: '批改完成量',
      type: 'line',
      data: [30, 22, 42, 80, 115, 90, 55],
      smooth: true,
      lineStyle: { color: '#10b981', width: 3 },
      areaStyle: { 
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(16, 185, 129, 0.3)' },
            { offset: 1, color: 'rgba(16, 185, 129, 0.05)' }
          ]
        }
      }
    }
  ],
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(15, 23, 42, 0.9)',
    borderColor: '#334155',
    textStyle: { color: '#f1f5f9' }
  }
})

// 成绩分布饼图配置
const scoreDistributionOption = reactive({
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(15, 23, 42, 0.9)',
    borderColor: '#334155',
    textStyle: { color: '#f1f5f9' }
  },
  series: [
    {
      name: '成绩分布',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '50%'],
      data: [
        { value: 335, name: '优秀(90-100)', itemStyle: { color: '#10b981' } },
        { value: 310, name: '良好(80-89)', itemStyle: { color: '#3b82f6' } },
        { value: 234, name: '中等(70-79)', itemStyle: { color: '#f59e0b' } },
        { value: 135, name: '及格(60-69)', itemStyle: { color: '#ef4444' } },
        { value: 48, name: '不及格(<60)', itemStyle: { color: '#6b7280' } }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: { color: '#e2e8f0' }
    }
  ]
})

// 学科覆盖率柱状图配置
const subjectCoverageOption = reactive({
  backgroundColor: 'transparent',
  grid: {
    left: '3%',
    right: '4%',
    bottom: '15%',
    top: '10%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['数学', '语文', '英语', '物理', '化学', '生物'],
    axisLine: { lineStyle: { color: '#64748b' } },
    axisLabel: { color: '#94a3b8', rotate: 0 }
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: '#64748b' } },
    axisLabel: { color: '#94a3b8' },
    splitLine: { lineStyle: { color: '#334155', type: 'dashed' } }
  },
  series: [
    {
      type: 'bar',
      data: [
        { value: 95, itemStyle: { color: '#3b82f6' } },
        { value: 88, itemStyle: { color: '#10b981' } },
        { value: 92, itemStyle: { color: '#8b5cf6' } },
        { value: 76, itemStyle: { color: '#f59e0b' } },
        { value: 83, itemStyle: { color: '#ef4444' } },
        { value: 69, itemStyle: { color: '#06b6d4' } }
      ],
      barWidth: '60%',
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.3)'
        }
      }
    }
  ],
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(15, 23, 42, 0.9)',
    borderColor: '#334155',
    textStyle: { color: '#f1f5f9' }
  }
})

// AI批改效率分析图配置
const efficiencyOption = reactive({
  backgroundColor: 'transparent',
  grid: {
    left: '3%',
    right: '4%',
    bottom: '10%',
    top: '10%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    axisLine: { lineStyle: { color: '#64748b' } },
    axisLabel: { color: '#94a3b8' }
  },
  yAxis: [
    {
      type: 'value',
      name: '批改数量',
      axisLine: { lineStyle: { color: '#64748b' } },
      axisLabel: { color: '#94a3b8' },
      splitLine: { lineStyle: { color: '#334155', type: 'dashed' } }
    },
    {
      type: 'value',
      name: '平均耗时(秒)',
      axisLine: { lineStyle: { color: '#64748b' } },
      axisLabel: { color: '#94a3b8' }
    }
  ],
  series: [
    {
      name: '批改数量',
      type: 'bar',
      data: [150, 120, 180, 210, 190, 140, 100],
      itemStyle: { color: '#3b82f6' },
      barWidth: '40%'
    },
    {
      name: '平均耗时',
      type: 'line',
      yAxisIndex: 1,
      data: [2.5, 2.3, 2.8, 3.1, 2.9, 2.4, 2.2],
      lineStyle: { color: '#ef4444', width: 3 },
      symbol: 'circle',
      symbolSize: 6
    }
  ],
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(15, 23, 42, 0.9)',
    borderColor: '#334155',
    textStyle: { color: '#f1f5f9' }
  }
})

// 地理分布散点图配置
const geoDistributionOption = reactive({
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(15, 23, 42, 0.9)',
    borderColor: '#334155',
    textStyle: { color: '#f1f5f9' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '10%',
    top: '10%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['北京', '上海', '广州', '深圳', '杭州', '南京', '武汉', '成都'],
    axisLine: { lineStyle: { color: '#64748b' } },
    axisLabel: { color: '#94a3b8', rotate: 45 }
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: '#64748b' } },
    axisLabel: { color: '#94a3b8' },
    splitLine: { lineStyle: { color: '#334155', type: 'dashed' } }
  },
  series: [
    {
      type: 'bar',
      data: [856, 723, 645, 589, 423, 378, 345, 312],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: '#06b6d4' },
            { offset: 1, color: '#0891b2' }
          ]
        }
      },
      barWidth: '60%'
    }
  ]
})

// 系统性能雷达图配置
const performanceRadarOption = reactive({
  backgroundColor: 'transparent',
  radar: {
    indicator: [
      { name: 'CPU使用率', max: 100 },
      { name: '内存使用率', max: 100 },
      { name: '网络延迟', max: 100 },
      { name: '磁盘IO', max: 100 },
      { name: '并发处理', max: 100 },
      { name: '响应速度', max: 100 }
    ],
    axisName: { color: '#94a3b8' },
    splitArea: {
      areaStyle: {
        color: ['rgba(59, 130, 246, 0.1)', 'rgba(16, 185, 129, 0.1)']
      }
    },
    axisLine: { lineStyle: { color: '#64748b' } },
    splitLine: { lineStyle: { color: '#64748b' } }
  },
  series: [
    {
      name: '系统性能',
      type: 'radar',
      data: [
        {
          value: [78, 65, 88, 72, 85, 92],
          name: '当前性能',
          areaStyle: { color: 'rgba(59, 130, 246, 0.3)' },
          lineStyle: { color: '#3b82f6' }
        }
      ]
    }
  ],
  tooltip: {
    backgroundColor: 'rgba(15, 23, 42, 0.9)',
    borderColor: '#334155',
    textStyle: { color: '#f1f5f9' }
  }
})

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 更新实时数据
const updateRealTimeData = () => {
  const events = [
    '用户完成作业提交',
    'AI批改任务执行',
    '系统性能监控',
    '数据备份完成',
    '新用户注册',
    '作业批改结果推送',
    '系统安全检查'
  ]
  
  const statuses = [
    { status: 'success', statusText: '成功' },
    { status: 'info', statusText: '完成' },
    { status: 'processing', statusText: '进行中' }
  ]
  
  const now = new Date()
  const timeStr = now.toLocaleTimeString('zh-CN', { hour12: false })
  
  const newItem = {
    time: timeStr,
    content: events[Math.floor(Math.random() * events.length)],
    ...statuses[Math.floor(Math.random() * statuses.length)]
  }
  
  realTimeData.value.unshift(newItem)
  if (realTimeData.value.length > 8) {
    realTimeData.value.pop()
  }
}

let timeInterval: number
let dataInterval: number

onMounted(() => {
  updateTime()
  timeInterval = setInterval(updateTime, 1000)
  dataInterval = setInterval(updateRealTimeData, 5000)
})

onUnmounted(() => {
  if (timeInterval) clearInterval(timeInterval)
  if (dataInterval) clearInterval(dataInterval)
})
</script>

<style lang="less" scoped>
.dashboard-container {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
  min-height: 100vh;
  padding: 20px;
  color: #f1f5f9;
  overflow-x: auto;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 0 20px;
  
  .header-title {
    .title-main {
      font-size: 32px;
      font-weight: 700;
      background: linear-gradient(135deg, #3b82f6, #06b6d4);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-right: 20px;
    }
    
    .title-sub {
      font-size: 18px;
      color: #94a3b8;
      font-weight: 400;
    }
  }
  
  .header-time {
    font-size: 20px;
    color: #06b6d4;
    font-family: 'Courier New', monospace;
    font-weight: 600;
  }
}

.dashboard-content {
  .metrics-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
    
    .metric-card {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
      border: 1px solid rgba(59, 130, 246, 0.3);
      border-radius: 12px;
      padding: 24px;
      display: flex;
      align-items: center;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
        border-color: rgba(59, 130, 246, 0.6);
      }
      
      .metric-icon {
        font-size: 36px;
        color: #3b82f6;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        background: rgba(59, 130, 246, 0.2);
        border-radius: 50%;
      }
      
      .metric-content {
        flex: 1;
        
        .metric-value {
          font-size: 28px;
          font-weight: 700;
          color: #f1f5f9;
          margin-bottom: 4px;
        }
        
        .metric-label {
          font-size: 14px;
          color: #94a3b8;
          margin-bottom: 8px;
        }
        
        .metric-trend {
          font-size: 12px;
          font-weight: 600;
          
          &.up {
            color: #10b981;
          }
          
          &.down {
            color: #ef4444;
          }
        }
      }
    }
  }
  
  .charts-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
    
    &:nth-child(3) {
      grid-template-columns: 2fr 1fr;
    }
    
    .chart-panel {
      background: rgba(15, 23, 42, 0.8);
      border: 1px solid #334155;
      border-radius: 12px;
      padding: 20px;
      backdrop-filter: blur(10px);
      
      &.wide {
        grid-column: 1 / 2;
      }
      
      .panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        
        h3 {
          color: #f1f5f9;
          font-size: 18px;
          font-weight: 600;
          margin: 0;
        }
        
        .panel-legend {
          display: flex;
          gap: 16px;
          
          .legend-item {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #94a3b8;
            
            .legend-dot {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              margin-right: 6px;
              
              &.blue { background: #3b82f6; }
              &.green { background: #10b981; }
            }
          }
        }
        
        .panel-controls {
          :deep(.ant-radio-group) {
            .ant-radio-button-wrapper {
              background: rgba(51, 65, 85, 0.5);
              border-color: #475569;
              color: #94a3b8;
              
              &.ant-radio-button-wrapper-checked {
                background: #3b82f6;
                border-color: #3b82f6;
                color: #ffffff;
              }
            }
          }
        }
      }
      
      .chart-container {
        height: 300px;
      }
      
      .real-time-data {
        height: 300px;
        
        .data-stream {
          height: 100%;
          overflow-y: auto;
          
          &::-webkit-scrollbar {
            width: 4px;
          }
          
          &::-webkit-scrollbar-track {
            background: rgba(51, 65, 85, 0.3);
            border-radius: 2px;
          }
          
          &::-webkit-scrollbar-thumb {
            background: #64748b;
            border-radius: 2px;
          }
          
          .stream-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid rgba(51, 65, 85, 0.5);
            
            .stream-time {
              font-size: 12px;
              color: #64748b;
              font-family: 'Courier New', monospace;
              min-width: 60px;
            }
            
            .stream-content {
              flex: 1;
              font-size: 14px;
              color: #e2e8f0;
              margin: 0 12px;
            }
            
            .stream-status {
              font-size: 12px;
              padding: 2px 8px;
              border-radius: 4px;
              min-width: 50px;
              text-align: center;
              
              &.success {
                background: rgba(16, 185, 129, 0.2);
                color: #10b981;
              }
              
              &.info {
                background: rgba(59, 130, 246, 0.2);
                color: #3b82f6;
              }
              
              &.processing {
                background: rgba(245, 158, 11, 0.2);
                color: #f59e0b;
              }
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .metrics-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .charts-row {
    grid-template-columns: 1fr !important;
    
    &:nth-child(3) {
      grid-template-columns: 1fr !important;
    }
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 10px;
  }
  
  .dashboard-header {
    flex-direction: column;
    gap: 10px;
    text-align: center;
    
    .header-title .title-main {
      font-size: 24px;
      margin-right: 0;
      display: block;
      margin-bottom: 8px;
    }
  }
  
  .metrics-row {
    grid-template-columns: 1fr !important;
  }
}
</style>